<template>
	<view>
		<view class="loginLayer" v-if="isLoginNum == 0" @tap="goLogin"></view>
		<image class="banner margB" src="../../static/images/zhuxue/teaBanner.png" v-if="currRole == 'stu'"></image>
		<image class="banner margB" src="../../static/images/zhuxue/jzBanner.png" v-else></image>
		<view class="perInfoWrap hasFlex" @tap="goSetPage">
			<template v-if="isLoginNum == 0">
				<image class="userHead margR" :src="defHead"></image>
				<view class="loginCon alignCen logTips">登录体验更多精彩~</view>
			</template>
			<template v-else-if="isLoginNum == 1">
				<template v-if="currRole == 'stu'">
					<template v-if="loading">
						<view style="width: 100%;">
							<per-info :perInfo="perInfo" :gradeName="gradeName" currPage="indexPage" @switchGrade="switchGrade"></per-info>
						</view>
					</template>
					<template v-else>
						<view class="loadingView">
							<loading></loading>
						</view>
					</template>
				</template>
				<template v-if="currRole == 'jz' || currRole == 'tea'">
					<image class="userHead margR" :src="defHead"></image>
					<view class="loginCon spaceBet alignCen">
						<view class="innerCon">
							<view class="userName">{{realName}}</view>
							<view class="roleName">{{roleName}}</view>
						</view>
						<view class="iconfont icon-gengduo"></view>
					</view>
				</template>
			</template>
		</view>
		<tab-navs :currRole="currRole" :tabArr="tabArr" @goTabPage="goTabPage"></tab-navs>
		<!-- 答题卡 -->
		<tui-bottom-popup :show="popupShow" :radius="radius" @close="hidePopup">
			<view class="popuoView">
				<view class="gradeTit">年级切换</view>
				<view class="gradeList">
					<view class="gradeItem"
						:class="[gradeIndex === index ? 'active' : '']"
						v-for="(item,index) in gradeList"
						:key="index"
						@tap="handleSelCurrGrade(index,item.name)"
					>{{item.name}}</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	//https://blog.csdn.net/m0_67403013/article/details/123432133?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-123432133-blog-121852424.235^v43^pc_blog_bottom_relevance_base4&spm=1001.2101.3001.4242.2&utm_relevant_index=4
	import TabNavs from './components/TabNav.vue'
	import PerInfo from '../subIndex/rankLevel/components/PerInfo.vue'
	import { getUserInfo,switchStuGradeData } from '@/api/zhuxue'
	export default {
		components:{
			TabNavs,
			PerInfo
		},
		data() {
			return {
				popupShow:false,
				radius:true,
				originTabArr:[
					{name:'AI精准学',url:'/static/images/zhuxue/tabImg/study.png',role:'stu'},
					{name:'学习记录',url:'/static/images/zhuxue/tabImg/learnRec.png',role:'stu'},
					{name:'学习记录',url:'/static/images/zhuxue/tabImg/learnRec.png',role:'jz,tea'},
					{name:'能力报告',url:'/static/images/zhuxue/tabImg/nlbg.png',role:'stu'},
					{name:'我的家长',url:'/static/images/zhuxue/tabImg/myJz.png',role:'stu'},
					{name:'交流中心',url:'/static/images/zhuxue/tabImg/bbs.png',role:'stu'},
					//{name:'我的推广',url:'/static/images/zhuxue/tabImg/myTg.png',role:'stu'},
					{name:'头衔设置',url:'/static/images/zhuxue/tabImg/txsz.png',role:'stu'},
					{name:'错题本',url:'/static/images/zhuxue/tabImg/subSet.png',role:'stu'},
					{name:'我的子女',url:'/static/images/zhuxue/tabImg/myChild.png',role:'jz'},
					{name:'在线购买',url:'/static/images/zhuxue/tabImg/buy.png',role:'jz'},
					//{name:'我的订单',url:'/static/images/zhuxue/tabImg/myOrder.png',role:'jz'},
					//{name:'学科设置',url:'/static/images/zhuxue/tabImg/subSet.png',role:'tea'},
					{name:'我的班级',url:'/static/images/zhuxue/tabImg/wdbj.png',role:'tea'},
				],
				gradeList:[{name:'一年级'},{name:'二年级'},{name:'三年级'},{name:'四年级'},{name:'五年级'},{name:'六年级'},{name:'七年级'},{name:'八年级'},{name:'九年级'},{name:'高一'},{name:'高二'},{name:'高三'}],
				gradeIndex:-1,
				gradeName:'',
				tabArr:[],
				isLoginNum:-1,//0未登录 1已登录
				currRole:'',
				roleName:'',
				realName:'',
				perInfo:{},
				gradeNo:0,
				loading:false,
				//currDate:'',
				//currStateNum:-1 ,//0 已过期 1临近过期 2 未过期
				//overDateNum:0,
				isRefreshFlag:false
			}
		},
		onLoad(){
			if(uni.getStorageSync('token')){
				this.isLoginNum = 1;
				this.getCurrRole();
				this.renderGradeListActive();
			}else{
				this.loading = true;
				this.isLoginNum = 0;
				this.currRole = 'stu';
				this.renderTabNavByRole();
			}
		},
		onShow(){
			if(this.isRefreshFlag){
				this.isLoginNum = 1;
				this.getCurrRole();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		methods:{
			renderGradeListActive(){
				this.gradeName = uni.getStorageSync('gradeName');
				this.gradeList.forEach((item,index)=>{
					if(item.name === this.gradeName){
						this.gradeIndex = index;
					}
				})
			},
			handleSelCurrGrade(index,gradeName){
				let field = { userId:uni.getStorageSync('userId'),gradeName };
				switchStuGradeData(field).then(res=>{
					uni.showToast({ title: '切换成功' });
					uni.setStorageSync('gradeName',gradeName);
					this.gradeName = gradeName;
					this.gradeIndex = index;
					setTimeout(()=>{
						this.popupShow = false;
					},1500)
				}).catch(err=>{})
			},
			hidePopup(){
				this.popupShow = false;
			},
			switchGrade(){
				this.popupShow = true;
			},
			getCurrRole(){
				let groupUserRole = uni.getStorageSync('groupUserRole');
				this.realName = uni.getStorageSync('realName');
				this.roleName = groupUserRole;
				if(groupUserRole == '学生'){
					this.currRole = 'stu';
				}else if(groupUserRole == '家长'){
					this.currRole = 'jz';
				}else{
					this.currRole = 'tea'
				}
				this.renderTabNavByRole();
				if(uni.getStorageSync('groupUserRole') == '学生'){
					this.loadUserInfo();
				}
			},
			renderTabNavByRole(){
				this.tabArr = this.originTabArr.filter(item=>{
					return item.role.indexOf(this.currRole) != -1
				});
			},
			loadUserInfo(){
				let field = { account:uni.getStorageSync('token') };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getUserInfo({content:contentStr}).then(res=>{
					this.perInfo = res.data.datas;
					uni.setStorageSync('userPortrait',this.perInfo.portait);
					uni.setStorageSync('realName',this.perInfo.realName);
					this.realName = this.perInfo.realName;
					this.loading = true;
				}).catch(err=>{
					this.loading = true;
					console.log(err)
				});
			}, 
			goSetPage(){ 
				this.routerJudge().then(res=>{
					uni.navigateTo({
						url:'/pages/subIndex/setting/setting?roleName=' + this.roleName + '&realName=' + this.realName
					})
				})
			},
			goRankSet(){
				uni.navigateTo({
					url:'/pages/subIndex/rankLevel/rankLevel'
				})
			},
			goLogin(){
				this.util.comNavigateToLogin('userFix',1);
				// uni.navigateTo({
				// 	url:'/pages/subIndex/errBook/errBook'
				// })
			},
			routerJudge(){
				return new Promise((resolve,reject)=>{
					if(uni.getStorageSync('token')){
						resolve();
					}else{
						this.util.comNavigateToLogin('userFix',1);
					}
				})
			},
			goTabPage(name){
				switch(name){
					case 'AI精准学':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/selectSub/selectSub'
							})
						})
						break;
					case '学习记录':
						this.routerJudge().then(res=>{
							if(this.currRole == 'stu'){
								uni.navigateTo({
									url:'/pages/subIndex/learnRecord/learnRecord?currRole=' + this.currRole
								})
							}else if(this.currRole == 'jz'){//家长
								uni.navigateTo({
									url:'/pages/subIndex/learnRecordQt/learnRecordQt?currRole=' + this.currRole
								})
							}else{//老师
								uni.navigateTo({
									url:'/pages/subIndex/learnRecordQt/learnRecordQt?currRole=' + this.currRole
								})
							}
						})
						break;
					case '能力报告':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/abilityRep/abilityRep?currRole=' + this.currRole
							})
						})
						break;
					case '错题本':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/errBook/errBook'
							})
						})
						break;
					case '我的家长':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/myJz/myJz'
							})
						})
						break; 
					case '交流中心':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/bbsCenter/bbsCenter?gradeNo=' + uni.getStorageSync('gradeNo')
							})
						})
						break;
					case '我的推广':
						uni.navigateTo({
							url:'/pages/subIndex/myTg/myTg'
						})
						break;
					case '头衔设置':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/rankLevel/rankLevel'
							})
						})
						break;
					case '在线购买':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/onlineBuy/onlineBuy'
							})
						})
						break;
					case '我的子女':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/myChildren/myChildren'
							})
						})
						break;
					case '我的订单':
						this.routerJudge().then(res=>{
							uni.navigateTo({
								url:'/pages/subIndex/orderList/orderList'
							})
						})
						break;
					case '我的班级':
						uni.navigateTo({
							url:'/pages/subIndex/myClasses/myClasses?levelB=' + this.levelB
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popuoView{
		padding: 10px 10rpx 50rpx;
		.gradeTit{
			border-bottom: 1rpx solid #eee;
			margin-bottom: 20rpx;
			color: $pss-color-primary_1;
			@include respTo(phone){
				height: 70rpx;
				line-height: 70rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				height: 40rpx;
				line-height: 40rpx;
				font-size: $padSize20;
				padding-bottom: 10rpx;
			}
		}
		.gradeList{
			display: grid;
			grid-template-columns: repeat(5,1fr);
			column-gap: 10rpx;
		}
		.gradeItem{
			text-align: center;
			background: #eee;
			margin-bottom: 10rpx;
			border-radius: 6rpx;
			color: $pss-text-color3;
			@include respTo(phone){
				height: 70rpx;
				line-height: 70rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				height: 50rpx;
				line-height: 50rpx;
				font-size: $padSize18;
			}
			&.active{
				border: 1rpx solid $pss-color-primary_1;
				color: #fff;
				background: $pss-color-primary_1;
			}
		}
	}
	.banner{
		width: 100%;
		height: 330rpx;
	}
	.perInfoWrap{
		box-shadow: 0 0 15rpx rgba(0,0,0,.1);
		border-radius: 15rpx;
		@include respTo(phone){
			padding: 20rpx;
			margin: 0 $useNum $useNum;
		}
		@include respTo(pad){
			padding: 10rpx;
			margin: 0 $calUseNum 30rpx;
		}
		.loadingView{
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 30rpx 0;
		}
		.userHead{
			border-radius: 50%;
			@include respTo(phone){
				width: 120rpx;
				height: 120rpx;
			}
			@include respTo(pad){
				width: 70rpx;
				height: 70rpx;
			}
		}
		.loginCon{
			flex: 1;
			.userName{
				font-weight: 600;
				color: $pss-text-color3;
				@include respTo(phone){
					font-size: $font-size30;
				}
				@include respTo(pad){
					font-size: $padSize18;
				}
			}
			.roleName{
				padding: 0 10rpx;
				@include respTo(phone){
					height: 38rpx;
					line-height: 38rpx;
					font-size: $font-size24;
					border-radius: 10rpx;
					margin-top: 15rpx;
				}
				@include respTo(pad){
					height: 22rpx;
					line-height: 22rpx;
					font-size: $padSize14;
					border-radius: 4rpx;
					margin-top: 8rpx;
				}
				text-align: center;
				color: #fff;
				background: $pss-color-primary_1;
			}
			.icon-gengduo{
				@include respTo(phone){
					font-size: $font-size28;
				}
				@include respTo(pad){
					font-size: $padSize16;
				}
				color: $pss-text-colora;
			}
			&.logTips{
				color: $pss-text-color8;
				@include respTo(phone){
					font-size: $font-size28;
				}
				@include respTo(pad){
					font-size: $padSize16;
				}
			}
		}
	}
</style>
